<!doctype html>
<html lang="en-US" dir="ltr">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Phoenix</title>
    <link rel="apple-touch-icon" sizes="180x180" href="static/img/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="static/img/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="static/img/favicons/favicon-16x16.png">
    <link rel="shortcut icon" type="image/x-icon" href="static/img/favicons/favicon.ico">
    <link rel="manifest" href="static/img/favicons/manifest.json">
    <meta name="msapplication-TileImage" content="static/img/favicons/mstile-150x150.png">
    <meta name="theme-color" content="#ffffff">
    <link rel="preconnect" href="https://fonts.gstatic.com/">
    <link href="static/css/css2.css" rel="stylesheet">
    <link href="static/css/css21.css" rel="stylesheet">
    <link href="static/css/phoenix.min.css" rel="stylesheet" id="style-default">
    <link href="#" rel="stylesheet" id="user-style-default">
    <style>
      body {
        opacity: 0;
      }
    </style>
  </head>

  <body>
    <main class="main" id="top">
      <div class="container-fluid px-0">
        <nav class="navbar navbar-light navbar-vertical navbar-vibrant navbar-expand-lg">
          <div class="collapse navbar-collapse" id="navbarVerticalCollapse">
            <div class="navbar-vertical-content scrollbar">
              <ul class="navbar-nav flex-column" id="navbarVerticalNav">
                <li class="nav-item"><a class="nav-link" href="index.html">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="cast"></span></span><span class="nav-link-text">Dashbboard</span></div>
                  </a></li>
                <li class="nav-item">
                  <p class="navbar-vertical-label">Pages</p><a class="nav-link" href="starter.html" role="button" data-bs-toggle="" aria-expanded="false">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="flag"></span></span><span class="nav-link-text">Starter</span></div>
                  </a><a class="nav-link dropdown-indicator" href="#errors" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="errors">
                    <div class="d-flex align-items-center">
                      <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-icon"><span data-feather="alert-triangle"></span></span><span class="nav-link-text">Errors</span>
                    </div>
                  </a>
                  <ul class="nav collapse parent" id="errors">
                    <li class="nav-item"><a class="nav-link" href="404.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">404</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="500.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">500</span></div>
                      </a></li>
                  </ul><a class="nav-link dropdown-indicator" href="#authentication" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="authentication">
                    <div class="d-flex align-items-center">
                      <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-icon"><span data-feather="lock"></span></span><span class="nav-link-text">Authentication</span>
                    </div>
                  </a>
                  <ul class="nav collapse parent" id="authentication">
                    <li class="nav-item"><a class="nav-link" href="sign-in.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Sign in</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="sign-up.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Sign up</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="sign-out.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Sign out</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="forgot-password.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Forgot password</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="reset-password.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Reset password</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="lock-screen.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Lock screen</span></div>
                      </a></li>
                  </ul>
                </li>
                <li class="nav-item">
                  <p class="navbar-vertical-label">Modules</p><a class="nav-link dropdown-indicator" href="#forms" role="button" data-bs-toggle="collapse" aria-expanded="true" aria-controls="forms">
                    <div class="d-flex align-items-center">
                      <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-icon"><span data-feather="file-text"></span></span><span class="nav-link-text">Forms</span>
                    </div>
                  </a>
                  <ul class="nav collapse parent show" id="forms">
                    <li class="nav-item"><a class="nav-link" href="form-control.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Form control</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="input-group.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Input group</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="select.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Select</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="checks.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Checks</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="range.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Range</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link active" href="" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Layout</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="floating-labels.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Floating labels</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="validation.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Validation</span></div>
                      </a></li>
                  </ul><a class="nav-link dropdown-indicator" href="#tables" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="tables">
                    <div class="d-flex align-items-center">
                      <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-icon"><span data-feather="columns"></span></span><span class="nav-link-text">Tables</span>
                    </div>
                  </a>
                  <ul class="nav collapse parent" id="tables">
                    <li class="nav-item"><a class="nav-link" href="basic-tables.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Basic tables</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="advance-tables.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Advance tables</span></div>
                      </a></li>
                  </ul><a class="nav-link dropdown-indicator" href="#components" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="components">
                    <div class="d-flex align-items-center">
                      <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-icon"><span data-feather="package"></span></span><span class="nav-link-text">Components</span>
                    </div>
                  </a>
                  <ul class="nav collapse parent" id="components">
                    <li class="nav-item"><a class="nav-link" href="accordion.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Accordion</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="avatar.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Avatar</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="alerts.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Alerts</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="badge.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Badge</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="breadcrumb.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Breadcrumb</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="button.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Buttons</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="card.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Card</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="carousel.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Carousel</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="collapse.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Collapse</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="dropdown.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Dropdown</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="list-group.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">List group</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="modal.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Modals</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="offcanvas.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Offcanvas</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="progress-bar.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Progress bar</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="placeholder.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Placeholder</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="pagination.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Pagination</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="popovers.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Popovers</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="scrollspy.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Scrollspy</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="spinners.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Spinners</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="toast.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Toast</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="tooltips.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Tooltips</span></div>
                      </a></li>
                  </ul><a class="nav-link dropdown-indicator" href="#utilities" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="utilities">
                    <div class="d-flex align-items-center">
                      <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-icon"><span data-feather="tool"></span></span><span class="nav-link-text">Utilities</span>
                    </div>
                  </a>
                  <ul class="nav collapse parent" id="utilities">
                    <li class="nav-item"><a class="nav-link" href="background.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Background</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="borders.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Borders</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="colors.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Colors</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="display.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Display</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="flex.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Flex</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="float.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Float</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="interactions.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Interactions</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="opacity.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Opacity</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="overflow.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Overflow</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="position.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Position</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="shadows.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Shadows</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="sizing.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Sizing</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="spacing.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Spacing</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="typography.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Typography</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="javascript:;" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Vertical align</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="javascript:;" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Visibility</span></div>
                      </a></li>
                  </ul><a class="nav-link dropdown-indicator" href="#multi-level" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="multi-level">
                    <div class="d-flex align-items-center">
                      <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-icon"><span data-feather="layers"></span></span><span class="nav-link-text">Multi level</span>
                    </div>
                  </a>
                  <ul class="nav collapse parent" id="multi-level">
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#level-two" data-bs-toggle="collapse" aria-expanded="false" aria-controls="multi-level">
                        <div class="d-flex align-items-center">
                          <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-text">Level two</span>
                        </div>
                      </a>
                      <ul class="nav collapse parent" id="level-two">
                        <li class="nav-item"><a class="nav-link" href="index.html#!.html" data-bs-toggle="" aria-expanded="false">
                            <div class="d-flex align-items-center"><span class="nav-link-text">Item 1</span></div>
                          </a></li>
                        <li class="nav-item"><a class="nav-link" href="index.html#!.html" data-bs-toggle="" aria-expanded="false">
                            <div class="d-flex align-items-center"><span class="nav-link-text">Item 2</span></div>
                          </a></li>
                      </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#level-three" data-bs-toggle="collapse" aria-expanded="false" aria-controls="multi-level">
                        <div class="d-flex align-items-center">
                          <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-text">Level three</span>
                        </div>
                      </a>
                      <ul class="nav collapse parent" id="level-three">
                        <li class="nav-item"><a class="nav-link" href="index.html#!.html" data-bs-toggle="" aria-expanded="false">
                            <div class="d-flex align-items-center"><span class="nav-link-text">Item 3</span></div>
                          </a></li>
                        <li class="nav-item"><a class="nav-link dropdown-indicator" href="#item-4" data-bs-toggle="collapse" aria-expanded="false" aria-controls="level-three">
                            <div class="d-flex align-items-center">
                              <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-text">Item 4</span>
                            </div>
                          </a>
                          <ul class="nav collapse parent" id="item-4">
                            <li class="nav-item"><a class="nav-link" href="index.html#!.html" data-bs-toggle="" aria-expanded="false">
                                <div class="d-flex align-items-center"><span class="nav-link-text">Item 5</span></div>
                              </a></li>
                            <li class="nav-item"><a class="nav-link" href="index.html#!.html" data-bs-toggle="" aria-expanded="false">
                                <div class="d-flex align-items-center"><span class="nav-link-text">Item 6</span></div>
                              </a></li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link dropdown-indicator" href="#level-four" data-bs-toggle="collapse" aria-expanded="false" aria-controls="multi-level">
                        <div class="d-flex align-items-center">
                          <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-text">Level four</span>
                        </div>
                      </a>
                      <ul class="nav collapse parent" id="level-four">
                        <li class="nav-item"><a class="nav-link" href="index.html#!.html" data-bs-toggle="" aria-expanded="false">
                            <div class="d-flex align-items-center"><span class="nav-link-text">Item 6</span></div>
                          </a></li>
                        <li class="nav-item"><a class="nav-link dropdown-indicator" href="#item-7" data-bs-toggle="collapse" aria-expanded="false" aria-controls="level-four">
                            <div class="d-flex align-items-center">
                              <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-text">Item 7</span>
                            </div>
                          </a>
                          <ul class="nav collapse parent" id="item-7">
                            <li class="nav-item"><a class="nav-link" href="index.html#!.html" data-bs-toggle="" aria-expanded="false">
                                <div class="d-flex align-items-center"><span class="nav-link-text">Item 8</span></div>
                              </a></li>
                            <li class="nav-item"><a class="nav-link dropdown-indicator" href="#item-9" data-bs-toggle="collapse" aria-expanded="false" aria-controls="item-7">
                                <div class="d-flex align-items-center">
                                  <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-text">Item 9</span>
                                </div>
                              </a>
                              <ul class="nav collapse parent" id="item-9">
                                <li class="nav-item"><a class="nav-link" href="index.html#!.html" data-bs-toggle="" aria-expanded="false">
                                    <div class="d-flex align-items-center"><span class="nav-link-text">Item 10</span></div>
                                  </a></li>
                                <li class="nav-item"><a class="nav-link" href="index.html#!.html" data-bs-toggle="" aria-expanded="false">
                                    <div class="d-flex align-items-center"><span class="nav-link-text">Item 11</span></div>
                                  </a></li>
                              </ul>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li class="nav-item">
                  <p class="navbar-vertical-label">Documentation</p><a class="nav-link" href="getting-started.html" role="button" data-bs-toggle="" aria-expanded="false">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="life-buoy"></span></span><span class="nav-link-text">Getting started</span></div>
                  </a><a class="nav-link dropdown-indicator" href="#customization" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="customization">
                    <div class="d-flex align-items-center">
                      <div class="dropdown-indicator-icon d-flex flex-center"><span class="fas fa-caret-right fs-0"></span></div><span class="nav-link-icon"><span data-feather="settings"></span></span><span class="nav-link-text">Customization</span>
                    </div>
                  </a>
                  <ul class="nav collapse parent" id="customization">
                    <li class="nav-item"><a class="nav-link" href="styling.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Styling</span></div>
                      </a></li>
                    <li class="nav-item"><a class="nav-link" href="plugin.html" data-bs-toggle="" aria-expanded="false">
                        <div class="d-flex align-items-center"><span class="nav-link-text">Plugin</span></div>
                      </a></li>
                  </ul><a class="nav-link" href="webpack.html" role="button" data-bs-toggle="" aria-expanded="false">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="hexagon"></span></span><span class="nav-link-text">Webpack</span></div>
                  </a><a class="nav-link" href="design-file.html" role="button" data-bs-toggle="" aria-expanded="false">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="figma"></span></span><span class="nav-link-text">Design file</span></div>
                  </a><a class="nav-link" href="changelog.html" role="button" data-bs-toggle="" aria-expanded="false">
                    <div class="d-flex align-items-center"><span class="nav-link-icon"><span data-feather="git-merge"></span></span><span class="nav-link-text">Changelog</span></div>
                  </a>
                </li>
              </ul>
            </div>
            <div class="navbar-vertical-footer"><a class="btn btn-link border-0 fw-semi-bold d-flex ps-0" href="#!"><span class="navbar-vertical-footer-icon" data-feather="log-out"></span><span>Settings</span></a></div>
          </div>
        </nav>
        <nav class="navbar navbar-light navbar-top navbar-expand">
          <div class="navbar-logo"><button class="btn navbar-toggler navbar-toggler-humburger-icon" type="button" data-bs-toggle="collapse" data-bs-target="#navbarVerticalCollapse" aria-controls="navbarVerticalCollapse" aria-expanded="false" aria-label="Toggle Navigation"><span class="navbar-toggle-icon"><span class="toggle-line"></span></span></button> <a class="navbar-brand me-1 me-sm-3" href="index.html">
              <div class="d-flex align-items-center">
                <div class="d-flex align-items-center"><img src="static/picture/logo.png" alt="phoenix" width="32">
                  <p class="logo-text ms-2 d-none d-sm-block">phoenix</p>
                </div>
              </div>
            </a></div>
          <div class="collapse navbar-collapse">
            <div class="search-box d-none d-lg-block">
              <form class="position-relative" data-bs-toggle="search" data-bs-display="static"><input class="form-control form-control-sm search-input search min-h-auto" type="search" placeholder="Search..." aria-label="Search"> <span class="fas fa-search search-box-icon"></span></form>
            </div>
            <ul class="navbar-nav navbar-nav-icons ms-auto flex-row">
              <li class="nav-item dropdown"><a class="nav-link" id="navbarDropdownNotification" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="text-700" data-feather="bell" style="height:20px;width:20px;"></span></a></li>
              <li class="nav-item dropdown"><a class="nav-link notification-indicator notification-indicator-primary" id="navbarDropdownSettings" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="text-700" data-feather="settings" style="height:20px;width:20px;"></span></a></li>
              <li class="nav-item dropdown"><a class="nav-link" id="navbarDropdownNindeDots" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="2" cy="2" r="2" fill="#6C6E71"></circle>
                    <circle cx="2" cy="8" r="2" fill="#6C6E71"></circle>
                    <circle cx="2" cy="14" r="2" fill="#6C6E71"></circle>
                    <circle cx="8" cy="8" r="2" fill="#6C6E71"></circle>
                    <circle cx="8" cy="14" r="2" fill="#6C6E71"></circle>
                    <circle cx="14" cy="8" r="2" fill="#6C6E71"></circle>
                    <circle cx="14" cy="14" r="2" fill="#6C6E71"></circle>
                    <circle cx="8" cy="2" r="2" fill="#6C6E71"></circle>
                    <circle cx="14" cy="2" r="2" fill="#6C6E71"></circle>
                  </svg></a>
                <div class="dropdown-menu dropdown-menu-end py-0 dropdown-nide-dots shadow border border-300" aria-labelledby="navbarDropdownNindeDots">
                  <div class="card bg-white position-relative border-0">
                    <div class="card-body pt-3 px-3 pb-0 overflow-auto scrollbar" style="height: 20rem;">
                      <div class="row text-center align-items-center gx-0 gy-0">
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/behance.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Behance</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/google-cloud.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Cloud</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/slack.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Slack</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/github.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Github</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/bitbucket.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">BitBucket</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/google-drive.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Drive</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/trello.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Trello</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/figma.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Figma</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/twitter.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Twitter</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/pinterest.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Pinterest</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/linkedin.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Linkedin</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/google-maps.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Maps</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/google-photos.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Photos</p>
                          </a></div>
                        <div class="col-4"><a class="d-block hover-bg-200 p-2 rounded-3 text-center text-decoration-none mb-3" href="#!" target="_blank"><img src="static/picture/spotify.png" alt="" width="30">
                            <p class="mb-0 text-black text-truncate fs--2 mt-1 pt-1">Spotify</p>
                          </a></div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="nav-item dropdown"><a class="nav-link lh-1 px-0 ms-5" id="navbarDropdownUser" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <div class="avatar avatar-l"><img class="rounded-circle" src="static/picture/57.png" alt=""></div>
                </a>
                <div class="dropdown-menu dropdown-menu-end py-0 dropdown-profile shadow border border-300" aria-labelledby="navbarDropdownUser">
                  <div class="card bg-white position-relative border-0">
                    <div class="card-body p-0 overflow-auto scrollbar" style="height: 18rem;">
                      <div class="text-center pt-4 pb-3">
                        <div class="avatar avatar-xl"><img class="rounded-circle" src="static/picture/57.png" alt=""></div>
                        <h6 class="mt-2">Jerry Seinfield</h6>
                      </div>
                      <div class="mb-3 mx-3"><input class="form-control form-control-sm" id="exampleFormControlInput1" placeholder="Update your status"></div>
                      <ul class="nav d-flex flex-column mb-2 pb-1">
                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="user"></span>Profile</a></li>
                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="pie-chart"></span>Dashboard</a></li>
                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="lock"></span>Posts &amp; Activity</a></li>
                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="settings"></span>Settings &amp; Privacy</a></li>
                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="help-circle"></span>Help Center</a></li>
                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="globe"></span>Language</a></li>
                      </ul>
                    </div>
                    <div class="card-footer p-0 border-top">
                      <ul class="nav d-flex flex-column my-3">
                        <li class="nav-item"><a class="nav-link px-3" href="#!"><span class="me-2 text-900" data-feather="user-plus"></span>Add another account</a></li>
                      </ul>
                      <hr>
                      <div class="px-3"><a class="btn btn-phoenix-secondary d-flex flex-center w-100" href="#!"><span class="me-2" data-feather="log-out"></span>Sign out</a></div>
                      <div class="my-2 text-center fw-bold fs--2 text-600"><a class="text-600 me-1" href="#!">Privacy policy</a>&bull;<a class="text-600 mx-1" href="#!">Terms</a>&bull;<a class="text-600 ms-1" href="#!">Cookies</a></div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </nav>
        <div class="content pt-5">
          <h2 class="mb-2 lh-sm">Layout</h2>
          <p class="text-700 lead mb-2">Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.</p><a class="btn btn-link p-0" href="javascript:;" target="_blank">Forms Layout on Bootstrap<span class="ms-1" data-feather="chevron-right"></span></a>
          <div class="mt-4">
            <div class="row g-4">
              <div class="col-12 col-xl-10 order-1 order-xl-0">
                <div class="card shadow-none border border-300 my-4" data-component-card="">
                  <div class="card-header p-4 border-bottom border-300 bg-soft">
                    <div class="row g-3 justify-content-between align-items-center">
                      <div class="col-12 col-md">
                        <h3 class="text-900 mb-0" data-anchor="">Basic form</h3>
                      </div>
                      <div class="col col-md-auto">
                        <nav class="nav nav-underline justify-content-end border-0 doc-tab-nav align-items-center" role="tablist"><button class="btn btn-link px-2 text-900 copy-code-btn" type="button">
                            <div class="fas fa-copy me-1"></div>Copy Code
                          </button><a class="btn btn-sm btn-phoenix-primary code-btn ms-2" data-bs-toggle="collapse" href="#basic-form-code" role="button" aria-controls="basic-form-code" aria-expanded="false"> <span class="me-2" data-feather="code"></span>View code</a><a class="btn btn-sm btn-phoenix-primary preview-btn ms-2"><span class="me-2" data-feather="eye"></span>Preview</a></nav>
                      </div>
                    </div>
                  </div>
                  <div class="card-body p-0">
                    <div class="collapse code-collapse" id="basic-form-code"><pre class="scrollbar" style="max-height:420px"><code class="language-html">&lt;form&gt;
  &lt;div class=&quot;mb-3&quot;&gt;
    &lt;label class=&quot;form-label&quot; for=&quot;basic-form-name&quot;&gt;Name&lt;/label&gt;
    &lt;input class=&quot;form-control&quot; id=&quot;basic-form-name&quot; type=&quot;text&quot; placeholder=&quot;Name&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;mb-3&quot;&gt;
    &lt;label class=&quot;form-label&quot; for=&quot;basic-form-email&quot;&gt;Email address&lt;/label&gt;
    &lt;input class=&quot;form-control&quot; id=&quot;basic-form-email&quot; type=&quot;email&quot; placeholder=&quot;name@example.com&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;mb-3&quot;&gt;
    &lt;label class=&quot;form-label&quot; for=&quot;basic-form-password&quot;&gt;Password&lt;/label&gt;
    &lt;input class=&quot;form-control&quot; id=&quot;basic-form-password&quot; type=&quot;password&quot; placeholder=&quot;Password&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;mb-3&quot;&gt;
    &lt;label class=&quot;form-label&quot; for=&quot;basic-form-dob&quot;&gt;Date of Birth&lt;/label&gt;
    &lt;input class=&quot;form-control&quot; id=&quot;basic-form-dob&quot; type=&quot;date&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;mb-3&quot;&gt;
    &lt;label class=&quot;form-label&quot; for=&quot;basic-form-gender&quot;&gt;Gender&lt;/label&gt;
    &lt;select class=&quot;form-select&quot; id=&quot;basic-form-gender&quot; aria-label=&quot;Default select example&quot;&gt;
      &lt;option selected=&quot;selected&quot;&gt;Select your gender&lt;/option&gt;
      &lt;option value=&quot;male&quot;&gt;Male&lt;/option&gt;
      &lt;option value=&quot;female&quot;&gt;Female&lt;/option&gt;
      &lt;option value=&quot;other&quot;&gt;Other&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class=&quot;mb-3&quot;&gt;
    &lt;div class=&quot;form-check&quot;&gt;
      &lt;input class=&quot;form-check-input&quot; id=&quot;flexRadioDefault1&quot; type=&quot;radio&quot; name=&quot;flexRadioDefault&quot;&gt;
      &lt;label class=&quot;form-check-label mb-0&quot; for=&quot;flexRadioDefault1&quot;&gt;Personal Account&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-check&quot;&gt;
      &lt;input class=&quot;form-check-input&quot; id=&quot;flexRadioDefault2&quot; type=&quot;radio&quot; name=&quot;flexRadioDefault&quot; checked=&quot;checked&quot;&gt;
      &lt;label class=&quot;form-check-label mb-0&quot; for=&quot;flexRadioDefault2&quot;&gt;Business Account&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;mb-3&quot;&gt;
    &lt;label class=&quot;form-label&quot;&gt;Upload Image&lt;/label&gt;
    &lt;input class=&quot;form-control&quot; type=&quot;file&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;mb-3&quot;&gt;
    &lt;label class=&quot;form-label&quot; for=&quot;basic-form-textarea&quot;&gt;Description&lt;/label&gt;
    &lt;textarea class=&quot;form-control&quot; id=&quot;basic-form-textarea&quot; rows=&quot;3&quot; placeholder=&quot;Description&quot;&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div class=&quot;mb-3 form-check&quot;&gt;
    &lt;input class=&quot;form-check-input&quot; id=&quot;basic-form-checkbox&quot; type=&quot;checkbox&quot;&gt;
    &lt;label class=&quot;form-check-label&quot; for=&quot;basic-form-checkbox&quot;&gt;Remember me&lt;/label&gt;
  &lt;/div&gt;
  &lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
&lt;/form&gt;</code></pre>
                    </div>
                    <div class="p-4 code-to-copy">
                      <form>
                        <div class="mb-3"><label class="form-label" for="basic-form-name">Name</label> <input class="form-control" id="basic-form-name" placeholder="Name"></div>
                        <div class="mb-3"><label class="form-label" for="basic-form-email">Email address</label> <input class="form-control" id="basic-form-email" type="email" placeholder="name@example.com"></div>
                        <div class="mb-3"><label class="form-label" for="basic-form-password">Password</label> <input class="form-control" id="basic-form-password" type="password" placeholder="Password"></div>
                        <div class="mb-3"><label class="form-label" for="basic-form-dob">Date of Birth</label> <input class="form-control" id="basic-form-dob" type="date"></div>
                        <div class="mb-3"><label class="form-label" for="basic-form-gender">Gender</label> <select class="form-select" id="basic-form-gender" aria-label="Default select example">
                            <option selected="selected">Select your gender</option>
                            <option value="male">Male</option>
                            <option value="female">Female</option>
                            <option value="other">Other</option>
                          </select></div>
                        <div class="mb-3">
                          <div class="form-check"><input class="form-check-input" id="flexRadioDefault1" type="radio" name="flexRadioDefault"> <label class="form-check-label mb-0" for="flexRadioDefault1">Personal Account</label></div>
                          <div class="form-check"><input class="form-check-input" id="flexRadioDefault2" type="radio" name="flexRadioDefault" checked="checked"> <label class="form-check-label mb-0" for="flexRadioDefault2">Business Account</label></div>
                        </div>
                        <div class="mb-3"><label class="form-label">Upload Image</label> <input class="form-control" type="file"></div>
                        <div class="mb-3"><label class="form-label" for="basic-form-textarea">Description</label> <textarea class="form-control" id="basic-form-textarea" rows="3" placeholder="Description"></textarea></div>
                        <div class="mb-3 form-check"><input class="form-check-input" id="basic-form-checkbox" type="checkbox"> <label class="form-check-label" for="basic-form-checkbox">Remember me</label></div><button class="btn btn-primary" type="submit">Submit</button>
                      </form>
                    </div>
                  </div>
                </div>
                <div class="card shadow-none border border-300 my-4" data-component-card="">
                  <div class="card-header p-4 border-bottom border-300 bg-soft">
                    <div class="row g-3 justify-content-between align-items-center">
                      <div class="col-12 col-md">
                        <h3 class="text-900 mb-0" data-anchor="">Horizontal form</h3>
                      </div>
                      <div class="col col-md-auto">
                        <nav class="nav nav-underline justify-content-end border-0 doc-tab-nav align-items-center" role="tablist"><button class="btn btn-link px-2 text-900 copy-code-btn" type="button">
                            <div class="fas fa-copy me-1"></div>Copy Code
                          </button><a class="btn btn-sm btn-phoenix-primary code-btn ms-2" data-bs-toggle="collapse" href="#horizontal-form-code" role="button" aria-controls="horizontal-form-code" aria-expanded="false"> <span class="me-2" data-feather="code"></span>View code</a><a class="btn btn-sm btn-phoenix-primary preview-btn ms-2"><span class="me-2" data-feather="eye"></span>Preview</a></nav>
                      </div>
                    </div>
                  </div>
                  <div class="card-body p-0">
                    <div class="collapse code-collapse" id="horizontal-form-code"><pre class="scrollbar" style="max-height:420px"><code class="language-html">&lt;form&gt;
  &lt;div class=&quot;row mb-3&quot;&gt;
    &lt;label class=&quot;col-sm-2 col-form-label&quot; for=&quot;inputEmail3&quot;&gt;Email&lt;/label&gt;
    &lt;div class=&quot;col-sm-10&quot;&gt;
      &lt;input class=&quot;form-control&quot; id=&quot;inputEmail3&quot; type=&quot;email&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;row mb-3&quot;&gt;
    &lt;label class=&quot;col-sm-2 col-form-label&quot; for=&quot;inputPassword3&quot;&gt;Password&lt;/label&gt;
    &lt;div class=&quot;col-sm-10&quot;&gt;
      &lt;input class=&quot;form-control&quot; id=&quot;inputPassword3&quot; type=&quot;password&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;fieldset&gt;
    &lt;div class=&quot;row mb-3&quot;&gt;
      &lt;label class=&quot;col-form-label col-sm-2 pt-0&quot;&gt;Radios&lt;/label&gt;
      &lt;div class=&quot;col-sm-10&quot;&gt;
        &lt;div class=&quot;form-check&quot;&gt;
          &lt;input class=&quot;form-check-input&quot; id=&quot;gridRadios1&quot; type=&quot;radio&quot; name=&quot;gridRadios&quot; value=&quot;option1&quot; checked=&quot;&quot;&gt;
          &lt;label class=&quot;form-check-label&quot; for=&quot;gridRadios1&quot;&gt;First radio&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-check&quot;&gt;
          &lt;input class=&quot;form-check-input&quot; id=&quot;gridRadios2&quot; type=&quot;radio&quot; name=&quot;gridRadios&quot; value=&quot;option2&quot;&gt;
          &lt;label class=&quot;form-check-label&quot; for=&quot;gridRadios2&quot;&gt;Second radio&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-check disabled&quot;&gt;
          &lt;input class=&quot;form-check-input&quot; id=&quot;gridRadios3&quot; type=&quot;radio&quot; name=&quot;gridRadios&quot; value=&quot;option3&quot; disabled=&quot;&quot;&gt;
          &lt;label class=&quot;form-check-label&quot; for=&quot;gridRadios3&quot;&gt;Third disabled radio&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/fieldset&gt;
  &lt;div class=&quot;row mb-3&quot;&gt;
    &lt;div class=&quot;col-form-label col-sm-2 pt-0&quot;&gt;Checkbox&lt;/div&gt;
    &lt;div class=&quot;col-sm-10&quot;&gt;
      &lt;div class=&quot;form-check&quot;&gt;
        &lt;input class=&quot;form-check-input&quot; id=&quot;gridCheck1&quot; type=&quot;checkbox&quot;&gt;
        &lt;label class=&quot;form-check-label&quot; for=&quot;gridCheck1&quot;&gt;Example checkbox&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Sign in&lt;/button&gt;
&lt;/form&gt;</code></pre>
                    </div>
                    <div class="p-4 code-to-copy">
                      <form>
                        <div class="row mb-3"><label class="col-sm-2 col-form-label" for="inputEmail3">Email</label>
                          <div class="col-sm-10"><input class="form-control" id="inputEmail3" type="email"></div>
                        </div>
                        <div class="row mb-3"><label class="col-sm-2 col-form-label" for="inputPassword3">Password</label>
                          <div class="col-sm-10"><input class="form-control" id="inputPassword3" type="password"></div>
                        </div>
                        <fieldset>
                          <div class="row mb-3"><label class="col-form-label col-sm-2 pt-0">Radios</label>
                            <div class="col-sm-10">
                              <div class="form-check"><input class="form-check-input" id="gridRadios1" type="radio" name="gridRadios" value="option1" checked=""> <label class="form-check-label" for="gridRadios1">First radio</label></div>
                              <div class="form-check"><input class="form-check-input" id="gridRadios2" type="radio" name="gridRadios" value="option2"> <label class="form-check-label" for="gridRadios2">Second radio</label></div>
                              <div class="form-check disabled"><input class="form-check-input" id="gridRadios3" type="radio" name="gridRadios" value="option3" disabled=""> <label class="form-check-label" for="gridRadios3">Third disabled radio</label></div>
                            </div>
                          </div>
                        </fieldset>
                        <div class="row mb-3">
                          <div class="col-form-label col-sm-2 pt-0">Checkbox</div>
                          <div class="col-sm-10">
                            <div class="form-check"><input class="form-check-input" id="gridCheck1" type="checkbox"> <label class="form-check-label" for="gridCheck1">Example checkbox</label></div>
                          </div>
                        </div><button class="btn btn-primary" type="submit">Sign in</button>
                      </form>
                    </div>
                  </div>
                </div>
                <div class="card shadow-none border border-300 my-4" data-component-card="">
                  <div class="card-header p-4 border-bottom border-300 bg-soft">
                    <div class="row g-3 justify-content-between align-items-center">
                      <div class="col-12 col-md">
                        <h3 class="text-900 mb-0" data-anchor="">Horizontal form label sizing</h3>
                      </div>
                      <div class="col col-md-auto">
                        <nav class="nav nav-underline justify-content-end border-0 doc-tab-nav align-items-center" role="tablist"><button class="btn btn-link px-2 text-900 copy-code-btn" type="button">
                            <div class="fas fa-copy me-1"></div>Copy Code
                          </button><a class="btn btn-sm btn-phoenix-primary code-btn ms-2" data-bs-toggle="collapse" href="#horizontal-form-label-sizing-code" role="button" aria-controls="horizontal-form-label-sizing-code" aria-expanded="false"> <span class="me-2" data-feather="code"></span>View code</a><a class="btn btn-sm btn-phoenix-primary preview-btn ms-2"><span class="me-2" data-feather="eye"></span>Preview</a></nav>
                      </div>
                    </div>
                  </div>
                  <div class="card-body p-0">
                    <div class="collapse code-collapse" id="horizontal-form-label-sizing-code"><pre class="scrollbar" style="max-height:420px"><code class="language-html">&lt;div class=&quot;row mb-3&quot;&gt;
  &lt;label class=&quot;col-sm-2 col-form-label col-form-label-sm&quot; for=&quot;colFormLabelSm&quot;&gt;Email&lt;/label&gt;
  &lt;div class=&quot;col-sm-10&quot;&gt;
    &lt;input class=&quot;form-control form-control-sm&quot; id=&quot;colFormLabelSm&quot; type=&quot;email&quot; placeholder=&quot;col-form-label-sm&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row mb-3&quot;&gt;
  &lt;label class=&quot;col-sm-2 col-form-label&quot; for=&quot;colFormLabel&quot;&gt;Email&lt;/label&gt;
  &lt;div class=&quot;col-sm-10&quot;&gt;
    &lt;input class=&quot;form-control&quot; id=&quot;colFormLabel&quot; type=&quot;email&quot; placeholder=&quot;col-form-label&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
  &lt;label class=&quot;col-sm-2 col-form-label col-form-label-lg&quot; for=&quot;colFormLabelLg&quot;&gt;Email&lt;/label&gt;
  &lt;div class=&quot;col-sm-10&quot;&gt;
    &lt;input class=&quot;form-control form-control-lg&quot; id=&quot;colFormLabelLg&quot; type=&quot;email&quot; placeholder=&quot;col-form-label-lg&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                    <div class="p-4 code-to-copy">
                      <div class="row mb-3"><label class="col-sm-2 col-form-label col-form-label-sm" for="colFormLabelSm">Email</label>
                        <div class="col-sm-10"><input class="form-control form-control-sm" id="colFormLabelSm" type="email" placeholder="col-form-label-sm"></div>
                      </div>
                      <div class="row mb-3"><label class="col-sm-2 col-form-label" for="colFormLabel">Email</label>
                        <div class="col-sm-10"><input class="form-control" id="colFormLabel" type="email" placeholder="col-form-label"></div>
                      </div>
                      <div class="row"><label class="col-sm-2 col-form-label col-form-label-lg" for="colFormLabelLg">Email</label>
                        <div class="col-sm-10"><input class="form-control form-control-lg" id="colFormLabelLg" type="email" placeholder="col-form-label-lg"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card shadow-none border border-300 my-4" data-component-card="">
                  <div class="card-header p-4 border-bottom border-300 bg-soft">
                    <div class="row g-3 justify-content-between align-items-center">
                      <div class="col-12 col-md">
                        <h3 class="text-900 mb-0" data-anchor="">Form grid</h3>
                      </div>
                      <div class="col col-md-auto">
                        <nav class="nav nav-underline justify-content-end border-0 doc-tab-nav align-items-center" role="tablist"><button class="btn btn-link px-2 text-900 copy-code-btn" type="button">
                            <div class="fas fa-copy me-1"></div>Copy Code
                          </button><a class="btn btn-sm btn-phoenix-primary code-btn ms-2" data-bs-toggle="collapse" href="#form-grid-code" role="button" aria-controls="form-grid-code" aria-expanded="false"> <span class="me-2" data-feather="code"></span>View code</a><a class="btn btn-sm btn-phoenix-primary preview-btn ms-2"><span class="me-2" data-feather="eye"></span>Preview</a></nav>
                      </div>
                    </div>
                  </div>
                  <div class="card-body p-0">
                    <div class="collapse code-collapse" id="form-grid-code"><pre class="scrollbar" style="max-height:420px"><code class="language-html">&lt;div class=&quot;row&quot;&gt;
  &lt;div class=&quot;col&quot;&gt;
    &lt;input class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;First name&quot; aria-label=&quot;First name&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col&quot;&gt;
    &lt;input class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;Last name&quot; aria-label=&quot;Last name&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                    <div class="p-4 code-to-copy">
                      <div class="row">
                        <div class="col"><input class="form-control" placeholder="First name" aria-label="First name"></div>
                        <div class="col"><input class="form-control" placeholder="Last name" aria-label="Last name"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card shadow-none border border-300 my-4" data-component-card="">
                  <div class="card-header p-4 border-bottom border-300 bg-soft">
                    <div class="row g-3 justify-content-between align-items-center">
                      <div class="col-12 col-md">
                        <h3 class="text-900 mb-0" data-anchor="">Form Grid Layout</h3>
                      </div>
                      <div class="col col-md-auto">
                        <nav class="nav nav-underline justify-content-end border-0 doc-tab-nav align-items-center" role="tablist"><button class="btn btn-link px-2 text-900 copy-code-btn" type="button">
                            <div class="fas fa-copy me-1"></div>Copy Code
                          </button><a class="btn btn-sm btn-phoenix-primary code-btn ms-2" data-bs-toggle="collapse" href="#form-grid-layout-code" role="button" aria-controls="form-grid-layout-code" aria-expanded="false"> <span class="me-2" data-feather="code"></span>View code</a><a class="btn btn-sm btn-phoenix-primary preview-btn ms-2"><span class="me-2" data-feather="eye"></span>Preview</a></nav>
                      </div>
                    </div>
                  </div>
                  <div class="card-body p-0">
                    <div class="collapse code-collapse" id="form-grid-layout-code"><pre class="scrollbar" style="max-height:420px"><code class="language-html">&lt;form class=&quot;row g-3&quot;&gt;
  &lt;div class=&quot;col-md-6&quot;&gt;
    &lt;label class=&quot;form-label&quot; for=&quot;inputEmail4&quot;&gt;Email&lt;/label&gt;
    &lt;input class=&quot;form-control&quot; id=&quot;inputEmail4&quot; type=&quot;email&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-md-6&quot;&gt;
    &lt;label class=&quot;form-label&quot; for=&quot;inputPassword4&quot;&gt;Password&lt;/label&gt;
    &lt;input class=&quot;form-control&quot; id=&quot;inputPassword4&quot; type=&quot;password&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-12&quot;&gt;
    &lt;label class=&quot;form-label&quot; for=&quot;inputAddress&quot;&gt;Address&lt;/label&gt;
    &lt;input class=&quot;form-control&quot; id=&quot;inputAddress&quot; type=&quot;text&quot; placeholder=&quot;1234 Main St&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-12&quot;&gt;
    &lt;label class=&quot;form-label&quot; for=&quot;inputAddress2&quot;&gt;Address 2&lt;/label&gt;
    &lt;input class=&quot;form-control&quot; id=&quot;inputAddress2&quot; type=&quot;text&quot; placeholder=&quot;Apartment, studio, or floor&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-md-6&quot;&gt;
    &lt;label class=&quot;form-label&quot; for=&quot;inputCity&quot;&gt;City&lt;/label&gt;
    &lt;input class=&quot;form-control&quot; id=&quot;inputCity&quot; type=&quot;text&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-md-4&quot;&gt;
    &lt;label class=&quot;form-label&quot; for=&quot;inputState&quot;&gt;State&lt;/label&gt;
    &lt;select class=&quot;form-select&quot; id=&quot;inputState&quot;&gt;
      &lt;option selected=&quot;selected&quot;&gt;Choose...&lt;/option&gt;
      &lt;option&gt;...&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-md-2&quot;&gt;
    &lt;label class=&quot;form-label&quot; for=&quot;inputZip&quot;&gt;Zip&lt;/label&gt;
    &lt;input class=&quot;form-control&quot; id=&quot;inputZip&quot; type=&quot;text&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-12&quot;&gt;
    &lt;div class=&quot;form-check&quot;&gt;
      &lt;input class=&quot;form-check-input&quot; id=&quot;gridCheck&quot; type=&quot;checkbox&quot;&gt;
      &lt;label class=&quot;form-check-label&quot; for=&quot;gridCheck&quot;&gt;Check me out&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-12&quot;&gt;
    &lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Sign in&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</code></pre>
                    </div>
                    <div class="p-4 code-to-copy">
                      <form class="row g-3">
                        <div class="col-md-6"><label class="form-label" for="inputEmail4">Email</label> <input class="form-control" id="inputEmail4" type="email"></div>
                        <div class="col-md-6"><label class="form-label" for="inputPassword4">Password</label> <input class="form-control" id="inputPassword4" type="password"></div>
                        <div class="col-12"><label class="form-label" for="inputAddress">Address</label> <input class="form-control" id="inputAddress" placeholder="1234 Main St"></div>
                        <div class="col-12"><label class="form-label" for="inputAddress2">Address 2</label> <input class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"></div>
                        <div class="col-md-6"><label class="form-label" for="inputCity">City</label> <input class="form-control" id="inputCity"></div>
                        <div class="col-md-4"><label class="form-label" for="inputState">State</label> <select class="form-select" id="inputState">
                            <option selected="selected">Choose...</option>
                            <option>...</option>
                          </select></div>
                        <div class="col-md-2"><label class="form-label" for="inputZip">Zip</label> <input class="form-control" id="inputZip"></div>
                        <div class="col-12">
                          <div class="form-check"><input class="form-check-input" id="gridCheck" type="checkbox"> <label class="form-check-label" for="gridCheck">Check me out</label></div>
                        </div>
                        <div class="col-12"><button class="btn btn-primary" type="submit">Sign in</button></div>
                      </form>
                    </div>
                  </div>
                </div>
                <div class="card shadow-none border border-300 my-4" data-component-card="">
                  <div class="card-header p-4 border-bottom border-300 bg-soft">
                    <div class="row g-3 justify-content-between align-items-center">
                      <div class="col-12 col-md">
                        <h3 class="text-900 mb-0" data-anchor="">Grid - Column Sizing</h3>
                      </div>
                      <div class="col col-md-auto">
                        <nav class="nav nav-underline justify-content-end border-0 doc-tab-nav align-items-center" role="tablist"><button class="btn btn-link px-2 text-900 copy-code-btn" type="button">
                            <div class="fas fa-copy me-1"></div>Copy Code
                          </button><a class="btn btn-sm btn-phoenix-primary code-btn ms-2" data-bs-toggle="collapse" href="#grid---column-sizing-code" role="button" aria-controls="grid---column-sizing-code" aria-expanded="false"> <span class="me-2" data-feather="code"></span>View code</a><a class="btn btn-sm btn-phoenix-primary preview-btn ms-2"><span class="me-2" data-feather="eye"></span>Preview</a></nav>
                      </div>
                    </div>
                  </div>
                  <div class="card-body p-0">
                    <div class="collapse code-collapse" id="grid---column-sizing-code"><pre class="scrollbar" style="max-height:420px"><code class="language-html">&lt;div class=&quot;row g-3&quot;&gt;
  &lt;div class=&quot;col-sm-7&quot;&gt;
    &lt;input class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;City&quot; aria-label=&quot;City&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-sm&quot;&gt;
    &lt;input class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;State&quot; aria-label=&quot;State&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-sm&quot;&gt;
    &lt;input class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;Zip&quot; aria-label=&quot;Zip&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                    <div class="p-4 code-to-copy">
                      <div class="row g-3">
                        <div class="col-sm-7"><input class="form-control" placeholder="City" aria-label="City"></div>
                        <div class="col-sm"><input class="form-control" placeholder="State" aria-label="State"></div>
                        <div class="col-sm"><input class="form-control" placeholder="Zip" aria-label="Zip"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card shadow-none border border-300 my-4" data-component-card="">
                  <div class="card-header p-4 border-bottom border-300 bg-soft">
                    <div class="row g-3 justify-content-between align-items-center">
                      <div class="col-12 col-md">
                        <h3 class="text-900 mb-0" data-anchor="">Grid - Auto Sizing</h3>
                      </div>
                      <div class="col col-md-auto">
                        <nav class="nav nav-underline justify-content-end border-0 doc-tab-nav align-items-center" role="tablist"><button class="btn btn-link px-2 text-900 copy-code-btn" type="button">
                            <div class="fas fa-copy me-1"></div>Copy Code
                          </button><a class="btn btn-sm btn-phoenix-primary code-btn ms-2" data-bs-toggle="collapse" href="#grid---auto-sizing-code" role="button" aria-controls="grid---auto-sizing-code" aria-expanded="false"> <span class="me-2" data-feather="code"></span>View code</a><a class="btn btn-sm btn-phoenix-primary preview-btn ms-2"><span class="me-2" data-feather="eye"></span>Preview</a></nav>
                      </div>
                    </div>
                  </div>
                  <div class="card-body p-0">
                    <div class="collapse code-collapse" id="grid---auto-sizing-code"><pre class="scrollbar" style="max-height:420px"><code class="language-html">&lt;form class=&quot;row gy-2 gx-3 align-items-center&quot;&gt;
  &lt;div class=&quot;col-auto&quot;&gt;
    &lt;label class=&quot;visually-hidden&quot; for=&quot;autoSizingInput&quot;&gt;Name&lt;/label&gt;
    &lt;input class=&quot;form-control&quot; id=&quot;autoSizingInput&quot; type=&quot;text&quot; placeholder=&quot;Jane Doe&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-auto&quot;&gt;
    &lt;label class=&quot;visually-hidden&quot; for=&quot;autoSizingInputGroup&quot;&gt;Username&lt;/label&gt;
    &lt;div class=&quot;input-group&quot;&gt;
      &lt;div class=&quot;input-group-text&quot;&gt;@&lt;/div&gt;
      &lt;input class=&quot;form-control&quot; id=&quot;autoSizingInputGroup&quot; type=&quot;text&quot; placeholder=&quot;Username&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-auto&quot;&gt;
    &lt;label class=&quot;visually-hidden&quot; for=&quot;autoSizingSelect&quot;&gt;Preference&lt;/label&gt;
    &lt;select class=&quot;form-select&quot; id=&quot;autoSizingSelect&quot;&gt;
      &lt;option selected=&quot;selected&quot;&gt;Choose...&lt;/option&gt;
      &lt;option value=&quot;1&quot;&gt;One&lt;/option&gt;
      &lt;option value=&quot;2&quot;&gt;Two&lt;/option&gt;
      &lt;option value=&quot;3&quot;&gt;Three&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-auto&quot;&gt;
    &lt;div class=&quot;form-check mb-0&quot;&gt;
      &lt;input class=&quot;form-check-input&quot; id=&quot;autoSizingCheck&quot; type=&quot;checkbox&quot;&gt;
      &lt;label class=&quot;form-check-label mb-0&quot; for=&quot;autoSizingCheck&quot;&gt;Remember me&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-auto&quot;&gt;
    &lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</code></pre>
                    </div>
                    <div class="p-4 code-to-copy">
                      <form class="row gy-2 gx-3 align-items-center">
                        <div class="col-auto"><label class="visually-hidden" for="autoSizingInput">Name</label> <input class="form-control" id="autoSizingInput" placeholder="Jane Doe"></div>
                        <div class="col-auto"><label class="visually-hidden" for="autoSizingInputGroup">Username</label>
                          <div class="input-group">
                            <div class="input-group-text">@</div><input class="form-control" id="autoSizingInputGroup" placeholder="Username">
                          </div>
                        </div>
                        <div class="col-auto"><label class="visually-hidden" for="autoSizingSelect">Preference</label> <select class="form-select" id="autoSizingSelect">
                            <option selected="selected">Choose...</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                          </select></div>
                        <div class="col-auto">
                          <div class="form-check mb-0"><input class="form-check-input" id="autoSizingCheck" type="checkbox"> <label class="form-check-label mb-0" for="autoSizingCheck">Remember me</label></div>
                        </div>
                        <div class="col-auto"><button class="btn btn-primary" type="submit">Submit</button></div>
                      </form>
                    </div>
                  </div>
                </div>
                <div class="card shadow-none border border-300 my-4" data-component-card="">
                  <div class="card-header p-4 border-bottom border-300 bg-soft">
                    <div class="row g-3 justify-content-between align-items-center">
                      <div class="col-12 col-md">
                        <h3 class="text-900 mb-0" data-anchor="">Gutters</h3>
                      </div>
                      <div class="col col-md-auto">
                        <nav class="nav nav-underline justify-content-end border-0 doc-tab-nav align-items-center" role="tablist"><button class="btn btn-link px-2 text-900 copy-code-btn" type="button">
                            <div class="fas fa-copy me-1"></div>Copy Code
                          </button><a class="btn btn-sm btn-phoenix-primary code-btn ms-2" data-bs-toggle="collapse" href="#gutters-code" role="button" aria-controls="gutters-code" aria-expanded="false"> <span class="me-2" data-feather="code"></span>View code</a><a class="btn btn-sm btn-phoenix-primary preview-btn ms-2"><span class="me-2" data-feather="eye"></span>Preview</a></nav>
                      </div>
                    </div>
                  </div>
                  <div class="card-body p-0">
                    <div class="collapse code-collapse" id="gutters-code"><pre class="scrollbar" style="max-height:420px"><code class="language-html">&lt;div class=&quot;row g-3&quot;&gt;
  &lt;div class=&quot;col&quot;&gt;
    &lt;input class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;First name&quot; aria-label=&quot;First name&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col&quot;&gt;
    &lt;input class=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;Last name&quot; aria-label=&quot;Last name&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                    <div class="p-4 code-to-copy">
                      <div class="row g-3">
                        <div class="col"><input class="form-control" placeholder="First name" aria-label="First name"></div>
                        <div class="col"><input class="form-control" placeholder="Last name" aria-label="Last name"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card shadow-none border border-300 my-4" data-component-card="">
                  <div class="card-header p-4 border-bottom border-300 bg-soft">
                    <div class="row g-3 justify-content-between align-items-center">
                      <div class="col-12 col-md">
                        <h3 class="text-900 mb-0" data-anchor="">Inline forms</h3>
                      </div>
                      <div class="col col-md-auto">
                        <nav class="nav nav-underline justify-content-end border-0 doc-tab-nav align-items-center" role="tablist"><button class="btn btn-link px-2 text-900 copy-code-btn" type="button">
                            <div class="fas fa-copy me-1"></div>Copy Code
                          </button><a class="btn btn-sm btn-phoenix-primary code-btn ms-2" data-bs-toggle="collapse" href="#inline-forms-code" role="button" aria-controls="inline-forms-code" aria-expanded="false"> <span class="me-2" data-feather="code"></span>View code</a><a class="btn btn-sm btn-phoenix-primary preview-btn ms-2"><span class="me-2" data-feather="eye"></span>Preview</a></nav>
                      </div>
                    </div>
                  </div>
                  <div class="card-body p-0">
                    <div class="collapse code-collapse" id="inline-forms-code"><pre class="scrollbar" style="max-height:420px"><code class="language-html">&lt;form class=&quot;row row-cols-lg-5 g-3 align-items-center&quot;&gt;
  &lt;div class=&quot;col-12&quot;&gt;
    &lt;label class=&quot;sr-only&quot; for=&quot;inlineFormInputName&quot;&gt;Name&lt;/label&gt;
    &lt;input class=&quot;form-control&quot; id=&quot;inlineFormInputName&quot; type=&quot;text&quot; placeholder=&quot;Jane Doe&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-12&quot;&gt;
    &lt;label class=&quot;sr-only&quot; for=&quot;inlineFormInputGroupUsername&quot;&gt;Username&lt;/label&gt;
    &lt;div class=&quot;input-group&quot;&gt;
      &lt;div class=&quot;input-group-text&quot;&gt;@&lt;/div&gt;
      &lt;input class=&quot;form-control&quot; id=&quot;inlineFormInputGroupUsername&quot; type=&quot;text&quot; placeholder=&quot;Username&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-12&quot;&gt;
    &lt;label class=&quot;sr-only&quot; for=&quot;inlineFormSelectPref&quot;&gt;Preference&lt;/label&gt;
    &lt;select class=&quot;form-select&quot; id=&quot;inlineFormSelectPref&quot;&gt;
      &lt;option selected=&quot;&quot;&gt;Choose...&lt;/option&gt;
      &lt;option value=&quot;1&quot;&gt;One&lt;/option&gt;
      &lt;option value=&quot;2&quot;&gt;Two&lt;/option&gt;
      &lt;option value=&quot;3&quot;&gt;Three&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-12&quot;&gt;
    &lt;div class=&quot;form-check mb-0&quot;&gt;
      &lt;input class=&quot;form-check-input&quot; id=&quot;inlineFormCheck&quot; type=&quot;checkbox&quot;&gt;
      &lt;label class=&quot;mb-0 form-check-label&quot; for=&quot;inlineFormCheck&quot;&gt;Remember me&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-12&quot;&gt;
    &lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;</code></pre>
                    </div>
                    <div class="p-4 code-to-copy">
                      <form class="row row-cols-lg-5 g-3 align-items-center">
                        <div class="col-12"><label class="sr-only" for="inlineFormInputName">Name</label> <input class="form-control" id="inlineFormInputName" placeholder="Jane Doe"></div>
                        <div class="col-12"><label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
                          <div class="input-group">
                            <div class="input-group-text">@</div><input class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
                          </div>
                        </div>
                        <div class="col-12"><label class="sr-only" for="inlineFormSelectPref">Preference</label> <select class="form-select" id="inlineFormSelectPref">
                            <option selected="">Choose...</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                          </select></div>
                        <div class="col-12">
                          <div class="form-check mb-0"><input class="form-check-input" id="inlineFormCheck" type="checkbox"> <label class="mb-0 form-check-label" for="inlineFormCheck">Remember me</label></div>
                        </div>
                        <div class="col-12"><button class="btn btn-primary" type="submit">Submit</button></div>
                      </form>
                    </div>
                  </div>
                </div>
                <div class="card shadow-none border border-300 my-4" data-component-card="">
                  <div class="card-header p-4 border-bottom border-300 bg-soft">
                    <div class="row g-3 justify-content-between align-items-center">
                      <div class="col-12 col-md">
                        <h3 class="text-900 mb-0" data-anchor="">Utilities</h3>
                      </div>
                      <div class="col col-md-auto">
                        <nav class="nav nav-underline justify-content-end border-0 doc-tab-nav align-items-center" role="tablist"><button class="btn btn-link px-2 text-900 copy-code-btn" type="button">
                            <div class="fas fa-copy me-1"></div>Copy Code
                          </button><a class="btn btn-sm btn-phoenix-primary code-btn ms-2" data-bs-toggle="collapse" href="#utilities-code" role="button" aria-controls="utilities-code" aria-expanded="false"> <span class="me-2" data-feather="code"></span>View code</a><a class="btn btn-sm btn-phoenix-primary preview-btn ms-2"><span class="me-2" data-feather="eye"></span>Preview</a></nav>
                      </div>
                    </div>
                  </div>
                  <div class="card-body p-0">
                    <div class="collapse code-collapse" id="utilities-code"><pre class="scrollbar" style="max-height:420px"><code class="language-html">&lt;div class=&quot;mb-3&quot;&gt;
  &lt;label class=&quot;form-label&quot; for=&quot;formGroupExampleInput&quot;&gt;Example label&lt;/label&gt;
  &lt;input class=&quot;form-control&quot; id=&quot;formGroupExampleInput&quot; type=&quot;text&quot; placeholder=&quot;Example input placeholder&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;mb-3&quot;&gt;
  &lt;label class=&quot;form-label&quot; for=&quot;formGroupExampleInput2&quot;&gt;Another label&lt;/label&gt;
  &lt;input class=&quot;form-control&quot; id=&quot;formGroupExampleInput2&quot; type=&quot;text&quot; placeholder=&quot;Another input placeholder&quot;&gt;
&lt;/div&gt;</code></pre>
                    </div>
                    <div class="p-4 code-to-copy">
                      <div class="mb-3"><label class="form-label" for="formGroupExampleInput">Example label</label> <input class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder"></div>
                      <div class="mb-3"><label class="form-label" for="formGroupExampleInput2">Another label</label> <input class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-12 col-xl-2">
                <div class="position-sticky" style="top: 80px;">
                  <h5 class="lh-1">On this page</h5>
                  <hr class="text-300">
                  <ul class="nav nav-vertical flex-column doc-nav">
                    <li class="nav-item"><a class="nav-link" href="#basic-form">Basic form</a></li>
                    <li class="nav-item"><a class="nav-link" href="#horizontal-form">Horizontal form</a></li>
                    <li class="nav-item"><a class="nav-link" href="#horizontal-form-label-sizing">Horizontal form label sizing</a></li>
                    <li class="nav-item"><a class="nav-link" href="#form-grid">Form grid</a></li>
                    <li class="nav-item"><a class="nav-link" href="#form-grid-layout">Form Grid Layout</a></li>
                    <li class="nav-item"><a class="nav-link" href="#grid-column-sizing">Grid - Column Sizing</a></li>
                    <li class="nav-item"><a class="nav-link" href="#grid-auto-sizing">Grid - Auto Sizing</a></li>
                    <li class="nav-item"><a class="nav-link" href="#gutters">Gutters</a></li>
                    <li class="nav-item"><a class="nav-link" href="#utilities">Utilities</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <footer class="footer">
            <div class="row g-0 justify-content-between align-items-center h-100 mb-3">
              <div class="col-12 col-sm-auto text-center">
                <p class="mb-0 text-900">Copyright &copy; 2022.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
              </div>
              <div class="col-12 col-sm-auto text-center">
                <p class="mb-0 text-600">v1.0.0</p>
              </div>
            </div>
          </footer>
        </div>
      </div>
    </main>
    <script src="static/js/phoenix.js"></script>
  </body>

</html>